<template>


  <div class="page-box" v-show="form.isend_base && form.isend_spec">
    <el-form :model="form" label-width="100px" class="form-box">
      <el-form-item label="* 商品详情">
        <tinymce-editor v-model="form.details" :init="initEditor" />
      </el-form-item>
       <el-button type="primary" @click="debouncedHandleClick" class="bt-fix" :loading="isLoading">  {{ buttonText }} </el-button>
    </el-form>


  </div>

</template>

<script>
  import TinymceEditor from '@/components/TinymceEditor';
  import { debounce } from 'lodash';
  export default {
    props: {
      form: Object
    },
    components: {
      TinymceEditor
    },

    data() {
      return {
        isLoading:false,
        buttonText:'保存商品',



      }
    },
     created() {
        // 创建防抖函数
        this.debouncedHandleClick = debounce(this.submitData, 3000, {
          leading: true,  // 第一次点击立即执行
          trailing: false // 防抖期间后续点击不执行
        });
      },

    computed: {
      initEditor() {
        return {
          height: 800,
          branding: false,
          skin_url: '/tinymce/skins/ui/oxide',
          content_css: '/tinymce/skins/content/default/content.css',
          language_url: '/tinymce/langs/zh_CN.js',
          language: 'zh_CN',
          outputFormat:"html",
          plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
          toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl',
          toolbar_drawer: 'sliding',
          images_upload_handler: (blobInfo, success, error) => {
            let file = blobInfo.blob();
            // 使用axios上传
            const formData = new FormData();
            formData.append('file', file, file.name);
            this.$http.post('/upload/uploadImage', formData).then(res => {
              if (res.data.code == 0) {
                console.log('----res.data.data----',res.data.data)
                let imgUrl=this.$imageFull(res.data.data)
                success(imgUrl);
              } else {
                error(res.data.msg);
              }
            }).catch(e => {
              console.error(e);
              error(e.message);
            });
          },
          file_picker_types: 'media',
          file_picker_callback: () => {}
        }
      },


    },
    mounted() {

    },

    methods: {
      submitData() {

        // if(! this.form.details){
        //   this.$message.error('缺少商品详情')
        //   return false;
        // }

        this.isLoading = true;
        this.buttonText = '处理中...';


        let postData=this.form

        if(postData.spec_type == '0'){
          postData.sku_object={}
        }else{
          let temp = this.form.sku_object.specs
          console.log('---------temp-----',temp)
          //postData.sku_object.specs = this.$transformData(temp)
          postData.sku_object.specs = temp
        }
        console.log('--提交保存----',postData)

        if(postData.id){
          this.$http.post('/product/update', postData).then(res => {
            console.log('----update---',res);
            this.isLoading = false;
            this.buttonText = '保存商品';
            if(res.data.code == 0){
               this.$message.success('更新商品成功！')
               this.$router.push('/product/index');
            }else{
               this.$message.error('更新商品失败')
            }
          }).catch(e => {
            this.isLoading = false;
            this.buttonText = '保存商品';
            this.$message.error(e.message)
          });
        }else{
          this.$http.post('/product/add', postData).then(res => {
            this.isLoading = false;
            this.buttonText = '保存商品';
            console.log('---add----',res);
            if(res.data.code == 0){
               this.$message.success('更新成功！')
               this.$router.push('/product/index');
            }else{
               this.$message.error('新增商品失败')
            }
          }).catch(e => {
            this.isLoading = false;
            this.buttonText = '保存商品';
            this.$message.error(e.message)
          });
        }


      }
    },
    beforeDestroy() {
      // 组件销毁时取消防抖函数
      this.debouncedHandleClick.cancel();
    }
  }
</script>


<style>
  .form-box {
    padding-top: 30px;
  }
.bt-fix{
  margin-left: 100px;
}
</style>
